<script setup lang="ts">
import OButton from '@/components/OButton.vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import OCard from '@/components/OCard.vue';
import card_1_img from '@/assets/home/cooperation/environment.png';
import card_2_img from '@/assets/home/cooperation/open.png';
import card_3_img from '@/assets/home/cooperation/hezuo.png';
import card_4_img from '@/assets/home/cooperation/fourm.png';
import ArrowRight from '~icons/app/icon-arrow.svg';
const { t } = useI18n();
const cooperations = computed(() => {
  return {
    learn_more: t('home.learn_more'),
    cardItems: [
      {
        title: t('home.cooperation.card_1.title'),
        description: t('home.cooperation.card_1.description'),
        img: card_1_img,
      },
      {
        title: t('home.cooperation.card_2.title'),
        description: t('home.cooperation.card_2.description'),
        img: card_2_img,
      },
      {
        title: t('home.cooperation.card_3.title'),
        description: t('home.cooperation.card_3.description'),
        img: card_3_img,
      },
      {
        title: t('home.cooperation.card_4.title'),
        description: t('home.cooperation.card_4.description'),
        img: card_4_img,
      },
    ],
  };
});
</script>
<template>
  <ul class="home-partners">
    <li v-for="item in cooperations.cardItems" class="home-partners-item">
      <o-card
        :style="{
          backgroundImage: `url(${item.img})`,
        }"
        class="card shadow"
      >
        <h2 class="home-title">{{ item.title }}</h2>
        <p class="home-description">{{ item.description }}</p>
        <o-button size="large" placement="right" class="home-btn">
          {{ $t('home.learn_more') }}
          <template #right
            ><o-icon><arrow-right></arrow-right></o-icon
          ></template>
        </o-button>
      </o-card>
    </li>
  </ul>
</template>
<style scoped lang="scss">
.home-partners {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border-bottom: 1px solid rgba(var(--theme-white-rgb), 0.2);
  padding-bottom: 96px;
  justify-content: center;
  &-item {
    position: relative;
    list-style: none;
    text-align: left;
    .home-title {
      padding: 10px 0 16px;
      font-size: 24px;
      font-weight: normal;
      line-height: 32px;
    }
    .home-description {
      max-width: 400px;
      font-size: 14px;
      color: #555555;
    }
    .home-btn {
      background-color: var(--theme-color);
      font-size: 16px;
      margin-top: 48px;
      margin-bottom: 24px;
      color: #fff;
    }
  }
  padding-bottom: 96px;
}

@media (max-width: 1100px) {
  .home-partners {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    &-item {
      padding: 0 24px;
    }
  }
}
</style>
